<template>
    <div class="about">
      <top ></top>
      <div class="title">
          <div class="adress">
              <div class="info">
                  <ul >
                      <li>礼成<span>|</span>苏州中心店</li>
                      <li>
                          <p class="p1">吴中区苏州中心D座20层</p>
                        <p class="p2">4000-258-717</p>
                      </li>
                      <li>礼成一站式婚礼服务</li>
                        <li>
                            <p class="p3">礼是仪式感,成是幸福感.礼成,精致与摩登的婚礼信仰品牌.</p>
                            <p class="p4">礼成,无以伦比的产品诠释传世灵感,以匠心独具的设计呈现梦幻场景,以细致用心的服务承载诺誓之重.甄选大牌设计师,掌控自营供应链,殿堂级资本背书,我们倾注全力,为实现你生命中最重要的一天:礼成!</p>
                        </li>
                  </ul>
              </div>
          </div>
          <div class="box"  id="box">
              <swiper :list="imgList"></swiper>
    </div>
          </div>
      <div class="footer">
        <h2>用户案例</h2>
        <swiperSlide></swiperSlide>
        
      </div>
    </div>
</template>
<script>
import top from "../top";
import swiper from '../swiper'
import swiperSlide from '../swiperSlide'
export default {
  data() {
    return {
     
      imgList:[
        'http://ww1.sinaimg.cn/large/0063Lr9rly1geqn1ay959j30ch0m8aax.jpg',
        'http://ww1.sinaimg.cn/large/0063Lr9rly1geqn28b3zvj30ch0m8t9k.jpg',
        'http://ww1.sinaimg.cn/large/0063Lr9rly1geqn2tt69dj30ch0m83zc.jpg'
      ]
    };
  },

  components: {
    top,
    swiper,
  swiperSlide
  }
};
</script>


<style >
@import url("../../assets/css/base.css");
@import url("../../assets/font/iconfont.css");
.about{
   background-color: #121212;
}
.title {
  height: 500px;
  margin: 0 60px;
  display: flex;
  justify-content: space-between;
 
  margin-bottom: 50px;
  z-index: -1;
}
.title .adress {
  flex: 2;
  background-color: #000;
  /* box-shadow: 30px 0 30px 0 #000; */
  border: 0;
  z-index: 2;
}

.adress .info {
  width: 260px;
  height: 150px;
  margin: 55px 0 0 75px;
}
.adress .info li:first-child {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.adress .info li span {
  padding: 0 5px;
}
.adress .info li:nth-child(2) {
  margin-top: 20px;
  font-size: 16px;
  color: #fff;
  height: 50px;
  line-height: 25px;
}
.adress .info li:nth-child(3) {
  margin-top: 20px;
  width: 140px;
  height: 20px;
  border: 1px solid #cccccc;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  color: #fff;
}
.adress .info li:nth-child(4) {
  margin-top: 175px;
  width: 600px;
  height: 60px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
}
.adress .info li .p1::before {
  content: "\e632";
  font-family: "iconfont";
  color: #fff;
  font-size: 20px;
  padding-right: 5px;
}
.adress .info li .p2::before {
  content: "\e60d";
  font-family: "iconfont";
  color: #fff;
  font-size: 20px;
  padding-right: 5px;
}
.title .box {
  flex: 1;
  /* background-color: gold; */
  position: relative;
  height: 500px;
  width: 100%;
  overflow: hidden;

  
}

.footer{
  width: 100%;
  margin-top: 50px;
}
.footer h2{
  margin-left: 60px;
  color: #fff;
  margin-bottom: 20px;
}
</style>

